<!-- cj -->
<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
    <head th:include="/utils/common_css :: commonCss"></head>
    <link th:href="@{/static/css/data_table.css}" rel="stylesheet" type="text/css"/>
    <style>
        .cj-main-from{
            box-sizing: border-box;
            font-weight: 300;
            margin: 10px 30px;
            box-shadow: 0 1px 15px 1px rgba(69,65,78,.08);
            background-color: #fff;
        }
        .c-m-f-header{
            vertical-align: middle;
            text-align: left;
            display: table;
            table-layout: fixed;
            height: 60px;
            width: 100%;
            border-bottom: 1px solid #ebedf2;
            padding: 10px;
        }
        .c-m-f-bottom{
            vertical-align: middle;
            text-align: left;
            table-layout: fixed;
            width: 100%;
            height:80px;
            background-color: #f7f8fa;
            border-color: #f7f8fa;
            padding: 20px;
        }
        .c-m-f-bottom .save{
            float: left;
        }
        .c-m-f-bottom .cancel{
            float: right;
        }
        .c-m-f-header h3{
            display: table-cell;
            vertical-align: middle;
            font-size: 1.3rem;
            font-weight: 500;
            padding: 20px;
        }
        .c-m-f-content .form-group{
            border-bottom: 1px dashed #ebedf2;
            padding: 25px 30px;
            display: flex;
            flex-wrap: wrap;
            margin-right: -15px;
            margin-left: -15px;
        }
        .form-group .col-form-label{
            text-align: right;
        }
        .c-m-f-content .form-group-last{
            border-bottom: 0;
        }
    </style>
</head>
<body class="m-page--fluid m--skin- m-content--skin-light2 m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default">
<div class="m-grid m-grid--hor m-grid--root m-page">
    <div th:replace="/utils/header :: header"></div>
    <div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver-desktop m-grid--desktop m-body">
        <div th:replace="/utils/left_menu :: leftMenu"></div>
        <div class="cj-main">
            <div class="cj-main-header">
                <ul>
                    <li class="icon">
                        <i class="m-nav__link-icon la la-home"></i>
                    </li>
                    <li>
                        <a class="decoration">系统设置</a>
                    </li>
                    <li>
                        <a class="decoration" href="/admin/sys/user">人员管理</a>
                    </li>
                    <li>
                        <a class="decoration" href="/admin/sys/user/add">添加新人员</a>
                    </li>
                </ul>
            </div>
            <div class="cj-main-from">
                <div class="c-m-f-header">
                    <h3>人员信息录入</h3>
                </div>
                <div class="c-m-f-content">
                    <form id="form" onsubmit="return false" action="##" method="post" enctype="multipart/form-data">
                        <div class="form-group ">
                            <label class="col-lg-2 col-form-label"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
                                登录名称：
                            </font></font></label>
                            <div class="col-lg-6">
                                <input type="text" class="form-control m-input" id="userName" name="userName" required minlength="2" placeholder="请输入您登录名称">
                                <span class="m-form__help"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
														请输入您登录名称
													</font></font></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 col-form-label"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
                                真实姓名：
                            </font></font></label>
                            <div class="col-lg-6">
                                <input type="text" class="form-control m-input" id="name" name="name"  minlength="2" required placeholder="请输入您真实姓名">
                                <span class="m-form__help"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
														请输入您真实姓名
													</font></font></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 col-form-label"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
                                邮箱：
                            </font></font></label>
                            <div class="col-lg-6">
                                <input type="email" class="form-control m-input" id="email" name="email"  minlength="2" required placeholder="请输入您邮箱">
                                <span class="m-form__help"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
														请输入您邮箱
													</font></font></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 col-form-label"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
                                手机号：
                            </font></font></label>
                            <div class="col-lg-6">
                                <input type="phone" class="form-control m-input" id="mobile" name="mobile"  minlength="11" required placeholder="请输入您手机号">
                                <span class="m-form__help"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
														请输入您手机号
													</font></font></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 col-form-label"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
                                职位：
                            </font></font></label>
                            <div class="col-lg-6">
                                <input type="text" class="form-control m-input" id="job" name="job"  minlength="2" required placeholder="请输入您职位">
                                <span class="m-form__help"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
														请输入您职位
													</font></font></span>
                            </div>
                        </div>

                        <div class="form-group ">
                            <label class="col-lg-2 col-form-label"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
                                选择角色权限:
                            </font></font></label>
                            <div class="col-lg-4 col-md-9 col-sm-12">
                                <select class="form-control" id="roleId" name="roleId">
                                    <option th:each="roles:${roles}" th:value="${roles.id}"
                                            th:text="${roles.name}"></option>
                                </select>
                            </div>
                        </div>


                        <div class="form-group-last form-group">
                            <label class="col-lg-2 col-form-label"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
                                状态：
                            </font></font></label>
                            <div class="col-lg-6">
                                <div class="m-checkbox-list">
                                    <label class="m-radio">
                                        <input type="radio"   name="state" value="1" checked><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
                                        启用
                                    </font></font><span></span>
                                    </label>
                                    <label class="m-radio">
                                        <input type="radio"  name="state" value="2"><font style="vertical-align: inherit;" ><font style="vertical-align: inherit;">
                                        禁用
                                    </font></font><span></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="c-m-f-bottom">
                            <button type="submit"  class="btn btn-brand save"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
                                提交
                            </font></font>
                            </button>
                            <button type="reset" class="btn btn-secondary cancel" onclick="cancel()" ><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
                                取消
                            </font></font></button>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>
</div>
<div th:include="/utils/common_js :: commonJS"></div>
<script th:src="@{/static/js/utils.js}" type="text/javascript"></script>
<script th:src="@{/static/js/ajax.js}" type="text/javascript"></script>
<script>

    $("#form").submit(function () {
        var data = $('#form').serialize();
        formAjax("/admin/sys/save", data);
    });

    function cancel() {
        swal({
            position: "取消",
            type: "warning",
            title: "数据已取消保存！",
            showConfirmButton: 1,
            timer: 1500
        })
    }
</script>
</body>
</html>